<template>
  <div class="case">
    <na-table
      :datas.sync="tableData"
      :searchObj.sync="search"
      @updateDatas="getAllwarehous"
    >
    </na-table>
    <!-- 仓库新建   -->
    <el-dialog
      title="新建仓库"
      :visible.sync="isAddMange"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="40%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="addWareForm"
          :model="addWareForm"
          :rules="rules"
          label-width="90px"
          class="dialogForm"
        >
          <el-form-item label="仓库编号">
            <el-input
              v-model="addWareForm.warehouseCode"
              placeholder="系统自动生成"
              size="mini"
              disabled
            />
          </el-form-item>
          <el-form-item label="仓库名称" prop="warehouseName">
            <el-input
              v-model="addWareForm.warehouseName"
              placeholder="请输入仓库名称"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="仓库类型" prop="warehouseType">
            <el-select
              v-model="addWareForm.warehouseType"
              filterable
              placeholder="请输入仓库名称"
              size="mini"
            >
              <el-option
                v-for="item in wareType"
                :key="item.dicValueID"
                :label="item.dicValueDesc"
                :value="item.dicValueCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属公司">
            <el-select
              v-model="addWareForm.organizationCode"
              filterable
              placeholder="请输入仓库名称"
              size="mini"
            >
              <el-option
                v-for="item in organizations"
                :key="item.orgCode"
                :label="item.orgName"
                :value="item.orgCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库管理员">
            <div class="flex flex_center">
              <div class="flex1">
                <el-input
                  v-model="wareShowper"
                  placeholder="选择人员"
                  size="mini"
                  disabled
                />
              </div>
              <div class="ml10 btnPer">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-user"
                  @click="isperShow = true"
                  >选择人员</el-button
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="addWareForm.warehouseTel"
              placeholder="请输入联系电话"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="仓库地址">
            <el-cascader
              v-model="addWareForm.areas"
              size="mini"
              :options="address"
              :props="{ label: 'areaName', value: 'areaCode' }"
              @change="areaChange"
            />
          </el-form-item>
          <el-form-item label="" class="mt5">
            <el-input
              v-model="addWareForm.warehouseAddress"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input
              v-model="addWareForm.warehouseDesc"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddMange = false">取 消</el-button>
        <el-button
          :loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addSave"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 仓库修改   -->
    <el-dialog
      title="仓库编辑"
      :visible.sync="iswareEdit"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="40%"
      @close="closeDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="addWareForm"
          :model="addWareForm"
          :rules="rules"
          label-width="90px"
          class="dialogForm"
        >
          <el-form-item label="仓库编号">
            <el-input
              v-model="addWareForm.warehouseCode"
              placeholder="系统自动生成"
              size="mini"
              disabled
            />
          </el-form-item>
          <el-form-item label="仓库名称" prop="warehouseName">
            <el-input
              v-model="addWareForm.warehouseName"
              placeholder="请输入仓库名称"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="仓库类型" prop="warehouseType">
            <el-select
              filterable
              v-model="addWareForm.warehouseType"
              placeholder="请选择仓库类型"
              size="mini"
            >
              <el-option
                v-for="item in wareType"
                :key="item.dicValueID"
                :label="item.dicValueDesc"
                :value="item.dicValueCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所属公司">
            <el-select
              filterable
              v-model="addWareForm.organizationCode"
              placeholder="请输入仓库名称"
              size="mini"
            >
              <el-option
                v-for="item in organizations"
                :key="item.orgCode"
                :label="item.orgName"
                :value="item.orgCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="仓库管理员">
            <div class="flex flex_center">
              <div class="flex1">
                <el-input
                  v-model="wareShowper"
                  placeholder="选择人员"
                  size="mini"
                  disabled
                />
              </div>
              <div class="ml10 btnPer">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-user"
                  @click="isperShow = true"
                  >选择人员</el-button
                >
              </div>
            </div>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="addWareForm.warehouseTel"
              placeholder="请输入联系电话"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="仓库地址">
            <el-cascader
              v-model="addWareForm.areas"
              size="mini"
              :options="address"
              :props="{ label: 'areaName', value: 'areaCode' }"
              @change="areaChange"
            />
          </el-form-item>
          <el-form-item label="" class="mt5">
            <el-input
              v-model="addWareForm.warehouseAddress"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
          <el-form-item label="备注" class="mt12">
            <el-input
              v-model="addWareForm.warehouseDesc"
              type="textarea"
              placeholder="请输入内容"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="iswareEdit = false">取 消</el-button>
        <el-button
          :loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="addEditSave"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 人员寻找弹框   -->
    <per-redio-dialog
      :per-visible.sync="isperShow"
      @getEmployee="getEmployee"
    />
    <!-- 设置库位弹框   -->
    <el-dialog
      title="设置库位"
      :visible.sync="isReservoir"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog"
      width="85%"
    >
      <div class="dialogDody reservoirBox flex flex_column">
        <div class="tipTT">
          <ul class="flex">
            <li class="flex mr15">
              <span>仓库名称：</span
              ><span class="c_333333">{{ rowTabels.warehouseName }}</span>
            </li>
            <li class="flex mr15">
              <span>仓库类型：</span
              ><span class="c_333333">{{ rowTabels.warehouseTypeName }}</span>
            </li>
            <li class="flex mr15">
              <span>创建日期：</span
              ><span class="c_333333">{{ rowTabels.createDate }}</span>
            </li>
            <li class="flex mr15">
              <span>创建人员：</span
              ><span class="c_333333">{{ rowTabels.createPersonName }}</span>
            </li>
          </ul>
        </div>
        <div class="flexs flex1" style="width: 100%">
          <div class="lfReservoir">
            <div class="p16">
              <el-button
                type="primary"
                class="mr5 w100"
                block
                size="small"
                icon="el-icon-plus"
                @click="addAreas = true"
                >创建库区
              </el-button>
            </div>
            <div class="reList">
              <ul id="areasList">
                <li
                  v-for="(item, index) in Reservoirs"
                  :key="index"
                  class="flex flex_between reAll"
                  :class="crtIndex === index ? 'crt' : ''"
                  @click="isAreasing ? changeAreas(item, index) : ''"
                >
                  <div>
                    <i
                      class="iconfont folderIco mr5 f22"
                      style="color: #83a0ff"
                    />
                    {{ item.areaName }}
                  </div>
                  <div v-if="index != 0" class="kuOP">
                    <el-popover
                      :ref="`popover-${index}`"
                      placement="bottom"
                      popper-class="areasPopover"
                      trigger="click"
                    >
                      <div class="areasOp">
                        <ul>
                          <li @click="updateAreas(item)">修改</li>
                          <li @click="addLocation = true">新增库位</li>
                          <li @click="deleteArea(item)">删除</li>
                        </ul>
                      </div>
                      <span slot="reference" class="el-icon-more c_3F61F1" />
                    </el-popover>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="flex1 flex flex_column rgRewBox">
            <div class="btnCon flex flex_between">
              <div class="plop">
                <el-button
                  type="primary"
                  size="small"
                  icon="el-icon-plus"
                  @click="addLocation = true"
                >
                  新建库位
                </el-button>
              </div>
              <!--      搜索框-->
              <div class="search">
                <el-input
                  v-model="locationSearch.likeWords"
                  placeholder="输入关键字"
                  size="small"
                >
                  <el-button
                    slot="append"
                    :loading="!isAreasing"
                    type="primary"
                    icon="el-icon-search"
                    :disabled="!isAreasing"
                    element-loading-spinner="el-icon-loading"
                    @click="getMatchAllAreas"
                  >
                    搜索
                  </el-button>
                </el-input>
              </div>
            </div>
            <div ref="tableCon" class="tableCon locationtable lastTdNoBorder">
              <el-table
                id="emtable"
                v-loading="tabLoading"
                :data="ReservoirsTables"
                border
                fit
                style="width: 100%"
                height="300"
              >
                <el-table-column label="库位名称" prop="areaShelfNameReal">
                </el-table-column>
                <el-table-column prop="isEnabledName" label="库位状态" />
                <el-table-column prop="areaCodeName" label="所属库区" />
                <el-table-column label="操作" width="70px" fixed="right">
                  <template slot-scope="scope">
                    <div>
                      <el-popover
                        :ref="`popover-${scope.$index}`"
                        placement="bottom-end"
                        popper-class="tableOp"
                        width="160"
                        :popper-options="{
                          boundariesElement: 'opBox',
                          removeOnDestroy: true,
                        }"
                        trigger="click"
                      >
                        <div class="operation">
                          <ul
                            v-for="(arry, arryIndex) in LocationOperations"
                            :key="arryIndex"
                          >
                            <template v-for="(op, opIndex) in arry">
                              <template v-if="op.key === 'enable'">
                                <li
                                  v-if="scope.row['isEnabled'] === 1"
                                  :key="opIndex"
                                  @click="locationClick(op.key, scope.row)"
                                >
                                  禁用
                                </li>
                                <li
                                  v-if="scope.row['isEnabled'] === 0"
                                  :key="opIndex"
                                  @click="locationClick(op.key, scope.row)"
                                >
                                  启用
                                </li>
                              </template>
                              <li
                                v-else
                                :key="opIndex"
                                @click="locationClick(op.key, scope.row)"
                              >
                                {{ op.text }}
                              </li>
                            </template>
                          </ul>
                        </div>
                        <div slot="reference" class="pl10 opBox pointer">
                          <span class="el-icon-more c_3F61F1" />
                        </div>
                      </el-popover>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <!--    分页-->
            <div class="paginaCon locationPagina">
              <pagination
                :total="wareAreasToal || 0"
                :page.sync="locationSearch.pageIndex"
                :limit.sync="locationSearch.pageSize"
                @pagination="getMatchAllAreas"
              />
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isReservoir = false">取 消</el-button>
        <el-button
          v-loading="addperLoading"
          :disabled="addperLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="isReservoir = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 新建库区   -->
    <el-dialog
      title="新建库区"
      :visible.sync="addAreas"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeAreasDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="addAreasForm"
          :model="addAreasForm"
          :rules="areasRules"
          label-width="80px"
          class="dialogForm"
        >
          <el-form-item label="库区名称" prop="areaName">
            <el-input
              v-model="addAreasForm.areaName"
              placeholder="请输入库区名称"
              size="mini"
              clearable
            >
              <template slot="append">区</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addAreas = false">取 消</el-button>
        <el-button
          v-loading="addAreasLoading"
          :disabled="addAreasLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveAreas"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改库区   -->
    <el-dialog
      title="修改库区"
      :visible.sync="editAreas"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeAreasDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="editAreasForm"
          :model="addAreasForm"
          :rules="areasRules"
          label-width="80px"
          class="dialogForm"
        >
          <el-form-item label="库区名称" prop="areaName">
            <el-input
              v-model="addAreasForm.areaName"
              placeholder="请输入库区名称"
              size="small"
              clearable
            >
              <template slot="append">区</template>
            </el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editAreas = false">取 消</el-button>
        <el-button
          v-loading="addAreasLoading"
          :disabled="addAreasLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="editSave"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 新建库位   -->
    <el-dialog
      title="新建库位"
      :visible.sync="addLocation"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
      @close="closeLocationDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="addLocationForm"
          :model="addLocationForm"
          :rules="locationRules"
          label-width="100px"
          class="dialogForm"
        >
          <el-form-item label="所属库区" prop="areaCode">
            <el-select
              filterable
              v-model="addLocationForm.areaCode"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in Reservoirs"
                :key="item.areaCode"
                :label="item.areaName"
                :value="item.areaCode"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="新增库位数" prop="areaShelfCount">
            <el-input
              v-model.number="addLocationForm.areaShelfCount"
              type="number"
              placeholder="请输入新增库位数"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addLocation = false">取 消</el-button>
        <el-button
          v-loading="addAreasLoading"
          :disabled="addAreasLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="savelocation"
          >保存</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="修改名称"
      :visible.sync="isShowVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      width="35%"
    >
      <div class="dialogDody">
        <el-form
          ref="form"
          :model="form"
          :rules="locationRules"
          label-width="100px"
          class="dialogForm"
        >
          <el-form-item label="库位名称" prop="areaShelfName">
            <el-input
              v-model="form.areaShelfName"
              placeholder="请输入库位名称"
              size="mini"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowVisible = false">取 消</el-button>
        <el-button
          v-loading="addAreasLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="handleSave"
          >保存</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from "@/components/Pagination";
import naTable from "@/components/naTable";
import perRedioDialog from "@/components/perDialogRedio";
import { arraySort } from "@/utils";

export default {
  name: "Warehouse",
  components: {
    Pagination,
    naTable,
    perRedioDialog,
  },
  data() {
    return {
      addperLoading: false,
      editAreas: false,
      addAreas: false,
      addAreasLoading: false,
      addLocation: false,
      isAreasing: true,
      iswareEdit: false, // 修改仓库弹框
      isReservoir: false, // 设置库位弹框是否打开
      isAddMange: false, // 打开新建仓库管理弹框
      tableHeight: null, // 表格最高高度
      total: 0, // 仓库管理列表总条数
      allDatas: [], // 所有表格管理数据
      checkedData: [], // 已选人员
      tabLoading: false, // 表格数据加载
      tableHead: [], // 仓库管理列表表头
      searchLoading: false, // 搜索按钮loading
      isperShow: false, // 选择人员弹框是否显示
      departData: [], // 当前组织架构对应得部门
      rowTabels: [], // 当前行得tabel数据
      Reservoirs: [], // 所有分区数据
      ReservoirsTables: [], // 仓库分区分页
      crtIndex: 0, // 库区选中索引
      isEnabled: null, // 是否启用、禁用
      warehouseID: null, // 仓库ID
      isShowVisible:false,
      form: {
        areaShelfID: 0,
        areaShelfName: "",
        areaShelfDesc: "",
        modifyBy: "",
      },
      // 仓库列表搜索条件
      search: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        organizationCode: "",
        warehouseState: -1,
      },
      areasSearch: {
        warehouseCode: "",
        warehouseAreaState: "",
        likeWords: "",
      },
      // 库位搜索条件
      locationSearch: {
        pageIndex: 1,
        pageSize: 10,
        likeWords: "",
        warehouseCode: "",
        warehouseAreaCode: "",
        areaShelfState: -1,
      },
      wareAreasToal: null, // 总得仓库分区数据条数
      // 表格操作按钮
      operations: [
        [
          {
            text: "修改",
            key: "modify",
          },
        ],
        [
          {
            text: "库位设置",
            key: "locatorSeting",
          },
        ],
        [
          {
            text: "启用",
            key: "enable",
          },
        ],
        [
          {
            text: "作废",
            key: "nullify",
          },
        ],
      ],
      LocationOperations: [
        [
          {
            text: "启用",
            key: "enable",
          },
        ],
        [
          {
            text: "修改",
            key: "modify",
          },
        ],
        [
          {
            text: "删除",
            key: "delete",
          },
        ],
      ],
      // 新建库区表单
      addAreasForm: {
        warehouseCode: "",
        areaName: "",
        areaManager: "",
        areaDesc: "",
      },
      // 新建库位
      addLocationForm: {
        warehouseCode: "",
        areaCode: "",
        areaShelfCount: "",
      },
      // 新建仓库表单
      addWareForm: {
        warehouseName: "",
        organizationCode: "",
        warehouseType: "",
        warehouseManager: "",
        warehouseTel: "",
        province: "",
        city: "",
        country: "",
        warehouseAddress: "",
        warehouseDesc: "",
        warehouseCode: "",
        areas: [], // 省市区数组
      },
      wareShowper: "", // 仓库管理员展示字段
      address: [], // 地址联动数据
      organizations: [], // 所有组织架构(公司)
      wareType: [], // 仓库类型
      rules: {
        warehouseName: [
          {
            required: true,
            message: "请输入仓库名称",
            trigger: "blur",
          },
        ],
        warehouseType: [
          {
            required: true,
            message: "请选择仓库类型",
            trigger: "blur",
          },
        ],
      },
      areasRules: {
        areaName: [
          {
            required: true,
            message: "请输入库区名称",
            trigger: "blur",
          },
        ],
      },
      locationRules: {
        areaCode: [
          {
            required: true,
            message: "请选择具体库区",
            trigger: "blur",
          },
        ],
        areaShelfCount: [
          {
            required: true,
            message: "请输入新增库位数量",
            trigger: "blur",
          },
        ],
      },

      tableData: {
        headId: "head", //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: "warehouseID", //表格列表key,也就是一条数据的唯一标识
        addTitle: "", //新建按钮名称-不填即为''则不显示按钮，默认显示新建则不需要该字段
        showSum: true, //显示合计
        refresh: true, //刷新按钮
        //表格按钮
        operationBtn: [
          {
            title: "启用",
            methodsName: "enableClick",
            permission: "MenuCode5-10-3-2",
            hideCondition: {
              //按钮显隐条件
              prop: "warehouseState", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                0,
              ],
            },
          },
          {
            title: "修改",
            methodsName: "modifyClick",
            permission: "MenuCode5-10-3-4",
          },
          {
            title: "库位设置",
            methodsName: "locatorSeting",
            permission: "",
          },
          {
            title: "删除",
            methodsName: "locatorSeting",
            permission: "MenuCode5-10-3-6",
          },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      },
    };
  },
  created() {
    // 获取仓库管理列表表格表头
    this.getTableHead();
    // 得到所有仓库列表
    this.getAllwarehous();
    // 获得仓库类型数据
    this.getWareData();
    // 地区联动数据
    this.getArea();
    //  获取所有组织架构
    this.getOrganization();
    // 所有仓库分区
    this.getAllAreas();
    // 当前仓库分区下得仓库库位数据
    this.getMatchAllAreas();
  },
  mounted() {},
  methods: {
    // 启用
    enableClick(data) {
      this.warehouseID = data.warehouseID;
      data.warehouseState === 1
        ? (this.isEnabled = false)
        : (this.isEnabled = true);
      this.setWareaSate();
    },
    // 修改
    modifyClick(data) {
      this.iswareEdit = true;
      this.getWareInfo(data.warehouseID);
    },
    // 库存设置
    locatorSeting(data) {
      this.isReservoir = true;
      this.rowTabels = data;
      this.addAreasForm.warehouseCode = data.warehouseCode;
      this.addAreasForm.areaManager = data.warehouseManagerName;
      this.locationSearch.warehouseCode = data.warehouseCode;
      this.areasSearch.warehouseCode = data.warehouseCode;
      this.addLocationForm.warehouseCode = data.warehouseCode;
      this.getAllAreas();
      this.getMatchAllAreas();
    },
    // 合计方法
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (
          column.property === "areaShelfCount" ||
          column.property === "goodsGlobalValue"
        ) {
          const values = data.map((item) => Number(item[column.property]));
          if (!values.every((value) => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] = sums[index]++;
          } else {
            sums[index] = " ";
          }
        }
      });

      return sums;
    },
    // 修改库区
    updateAreas(item) {
      this.editAreas = true;
      const parmas = {
        queryBy: 1,
        queryValue: item.areaID.toString(),
      };
      this.$api.warehouse.getAreasInfo(parmas).then((res) => {
        this.addAreasForm = res;
        this.addAreasForm.areaName = res.areaName.split("区")[0];
      });
    },
    // 删除库区
    deleteArea(item) {
      const parmas = {
        entityID: item.areaID,
      };
      this.$confirm("确定删除该仓库分区, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.warehouse.deleteArea(parmas).then(() => {
          this.getAllAreas();
          this.$message({
            message: "删除成功",
            type: "success",
          });
        });
      });
    },
    // 保存修改库区
    editSave() {
      const formData = this.addAreasForm;
      formData.areaName = this.addAreasForm.areaName + "区";
      const parmas = formData;
      this.addAreasLoading = true;
      this.$refs.editAreasForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse
            .savaUpadateArea(parmas)
            .then(() => {
              this.addAreasLoading = false;
              this.editAreas = false;
              this.getAllAreas();
              this.$message({
                message: "修改成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addAreasLoading = false;
            });
        }
      });
    },
    // 保存库区
    saveAreas() {
      const formData = this.addAreasForm;
      formData.areaName = this.addAreasForm.areaName + "区";
      const parmas = formData;
      this.addAreasLoading = true;
      this.$refs.addAreasForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse
            .AddWarehouseArea(parmas)
            .then(() => {
              this.addAreasLoading = false;
              this.addAreas = false;
              this.getAllAreas();
              this.$message({
                message: "新增成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addAreasLoading = false;
            });
        }
      });
    },
    changeAreas(item, index) {
      this.locationSearch.warehouseAreaCode = item.areaCode;
      this.addLocationForm.areaCode = item.areaCode;
      this.crtIndex = index;
      this.getMatchAllAreas();
    },
    // 新建库位
    savelocation() {
      const parmas = this.addLocationForm;
      this.$refs.addLocationForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse
            .addLocation(parmas)
            .then(() => {
              this.addAreasLoading = false;
              this.addLocation = false;
              this.getMatchAllAreas();
              this.$message({
                message: "新增库位成功",
                type: "success",
              });
            })
            .catch(() => {
              this.addAreasLoading = false;
            });
        }
      });
    },
    // 保存编辑仓库数据
    addEditSave() {
      const parmas = this.addWareForm;
      this.addperLoading = true;
      this.$api.warehouse
        .saveUpateWareHouse(parmas)
        .then(() => {
          this.addperLoading = false;
          this.iswareEdit = false;
          this.getAllwarehous();
          this.$message({
            message: "编辑成功",
            type: "success",
          });
        })
        .catch(() => {
          this.addperLoading = false;
        });
    },
    // 仓库修改数据回显
    getWareInfo(id) {
      const parmas = {
        queryBy: 1,
        queryValue: id.toString(),
      };
      this.$api.warehouse.getwareaInfo(parmas).then((res) => {
        this.addWareForm = res;
        this.wareShowper = res.warehouseManagerName;
        const arry = [];
        arry.push(res.province, res.city, res.country);
        this.addWareForm.areas = arry;
      });
    },
    // 库位表格行操作
    locationClick(key, data) {
      if (key === "delete") {
        const parmas = {
          entityID: data.areaShelfID,
        };
        this.$confirm("确定删除该库位, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          // 删除
          this.$api.warehouse.deleLocation(parmas).then(() => {
            this.getMatchAllAreas();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          });
        });
      } else if (key === "enable") {
        const parmas = {
          entityID: data.areaShelfID,
          isDisabled: Boolean(data.isEnabled),
        };
        this.$confirm("确定启用/禁用该库位, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          // 删除
          this.$api.warehouse.IsDisabledWarehouseAreaShelf(parmas).then(() => {
            this.getMatchAllAreas();
            this.$message({
              message: "设置成功",
              type: "success",
            });
          });
        });
      } else if (key === "modify") {
        this.form = JSON.parse(JSON.stringify(data)) 
        this.isShowVisible = true
      }
    },

    //保存
    handleSave(){
      this.$api.warehouse.UpdateAreaShelf(this.form).then((res)=>{
        this.$message.success('修改成功！')
        this.isShowVisible = false
        this.getMatchAllAreas();
      })
    },
    // 当前仓库所有库区
    getAllAreas() {
      const parmas = this.areasSearch;
      this.$api.warehouse.GetMatchWarehouseAreas(parmas).then((res) => {
        const item = {
          warehouseCode: "",
          areaCode: "",
          areaName: "全部",
          areaManager: "",
          areaDesc: "",
        };
        this.Reservoirs = res;
        this.Reservoirs.unshift(item);
        this.locationSearch.areaCode = res ? res[1] : "";
      });
    },
    // 当前库区下得仓库库位数据
    getMatchAllAreas() {
      const parmas = this.locationSearch;
      this.isAreasing = false;
      this.$api.warehouse
        .GetMatchPageWarehouseAreas(parmas)
        .then((res) => {
          this.ReservoirsTables = res.list;
          this.isAreasing = true;
          this.wareAreasToal = res.totalCount;
        })
        .catch(() => {
          this.isAreasing = true;
        });
    },
    // 得到仓库管理员
    getEmployee(val) {
      this.addWareForm.warehouseManager = val.employeeCode;
      this.wareShowper = val.employeeName;
      this.addWareForm.warehouseTel = val.mobile;
    },
    // 新建仓库
    addSave() {
      const parmas = this.addWareForm;
      this.addperLoading = true;
      this.$refs.addWareForm.validate((valid) => {
        if (valid) {
          this.$api.warehouse
            .AddWarehouse(parmas)
            .then(() => {
              this.addperLoading = false;
              this.isAddMange = false;
              this.wareShowper = ""; // 清空管理员展示字段内容
              this.$message({
                message: "新增成功",
                type: "success",
              });
              this.getAllwarehous();
            })
            .catch(() => {
              this.addperLoading = false;
            });
        }
      });
    },
    // 选择地址
    areaChange(val) {
      this.addWareForm.province = val ? val[0] : "";
      this.addWareForm.city = val ? val[1] : "";
      this.addWareForm.country = val ? val[2] : "";
    },
    // 获取所有组织架构
    getOrganization() {
      this.$api.user.getAllOrganizations().then((res) => {
        this.organizations = res;
        this.addWareForm.organizationCode = res ? res[0].orgCode : "";
      });
    },
    // 得到所有仓库列表
    getAllwarehous() {
      const parmas = this.search;
      this.$api.warehouse.GetWarehousePageDataList(parmas).then((res) => {
        this.tableData.tbody = res.list;
        this.search.total = res.totalCount;
      });
    },
    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then((res) => {
        this.address = res;
      });
    },
    // 获得仓库类型数据
    getWareData() {
      this.$api.common.GetWarehouseTypeDataList().then((res) => {
        this.wareType = res;
      });
    },
    // 仓库启用禁用
    setWareaSate() {
      const parmas = {
        warehouseID: this.warehouseID,
        isEnabled: this.isEnabled,
      };
      this.$confirm("确定启用/禁用, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.warehouse.setWareState(parmas).then(() => {
          // 得到所有仓库列表
          this.getAllwarehous();
          this.$message({
            message: "设置成功",
            type: "success",
          });
        });
      });
    },
    // 获取仓库管理列表表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.warehouselist,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableData.thead = res;
      });
    },
    // 关闭弹框事件
    closeDialog() {
      // 关闭弹框的时候清空数据
      if (this.$refs.addWareForm) {
        this.$refs.addWareForm.resetFields();
      }
      if (this.$refs.editWareForm) {
        this.$refs.editWareForm.resetFields();
      }
      this.addWareForm = this.$options.data().addWareForm;
      this.wareShowper = ""; // 清空管理员展示字段内容
    },
    // 关闭新建库区弹框事件
    closeAreasDialog() {
      if (this.$refs.addAreasForm) {
        this.$refs.addAreasForm.resetFields();
      }
      this.addAreasForm.areaName = this.$options.data().addAreasForm.areaName;
      this.addAreasForm.areaID = "";
    },
    // 库位弹框关闭事件
    closeLocationDialog() {
      if (this.$refs.addLocationForm) {
        this.$refs.addLocationForm.resetFields();
      }
      this.addLocationForm.areaShelfCount = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.areasOp {
  li {
    padding: 8px 16px;
    cursor: pointer;

    &:hover {
      background: #f6f6f6;
    }
  }
}

.locationtable {
  padding-bottom: 52px;
  position: relative;
}

.locationPagina {
  position: absolute;
  border: none;
  bottom: 0px;
  left: 0px;
  width: auto;
}

.reservoirBox {
  height: 100%;

  .rgRewBox {
    width: calc(100% - 260px);
    height: 540px;
    overflow-y: auto;
    position: relative;

    .btnCon {
      border-bottom: none;
    }
  }

  .lfReservoir {
    .reAll {
      .kuOP {
        display: none;
      }

      &:hover {
        background: #3f61f110;
        color: #3f61f1;

        .kuOP {
          display: block !important;
        }
      }
    }

    .reAll.crt {
      background: #3f61f110;
      color: #3f61f1;
    }

    .reAll.on {
      background: #3f61f110;
      color: #3f61f1;
    }

    .reList {
      padding-bottom: 120px;

      li {
        padding: 10px 16px;
        cursor: pointer;
      }
    }

    width: 260px;
    border-right: 1px #eee solid;
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.04);
  }

  .tipTT {
    border-bottom: 1px solid #e6e6e6;
    width: 100%;
    background: #f5f6f9;
    padding: 0 16px;
    color: #999aaa;
    line-height: 33px;
  }
}
</style>
